<template>
  <div class="card page-project-list pages"
       id="projectProcess">
    <div class="page-search">
      <a-form class="form-inline"
              :form="searchForm">

        <a-form-item label="时间范围">
          <a-range-picker v-decorator="['project']" />
        </a-form-item>
        <a-form-item label="采购状态">
          <a-select :options="approvalStateDict"
                    v-decorator="['approvalState']"
                    placeholder="请选择" />
        </a-form-item>
        <a-form-item label="完成状态">
          <a-select v-decorator="['multiple']"
                    mode="multiple"
                    :options="approvalStateDict"
                    placeholder="多选" />
        </a-form-item>
        <a-form-item class="search-buttons">
          <a-button type="primary"
                    v-click='{func:handleSearch}'>查询</a-button>
          <a-button @click="handleReset">重置</a-button>
        </a-form-item>
      </a-form>
    </div>
    <!-- 表格 -->
    <standard-table ref="tableChildren"
                    :pagination="false"
                    :columns="columns"
                    :bordered=true
                    :dataSource="dataSource"
                    @change="onChange">
      <span slot="tags">
        313213
      </span>
    </standard-table>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import GlobalMixin from '@/mixins/global'
import { columnsData } from './cloumns.js'
import { StandardTable } from '@/common/components'
import { tableList } from '@/api/table'
import Test from './HeadInfo'
import fromTem from './form'
import frommybtns from './fromMybtns'
import backOpinion from './backOpinion'
export default {
  name: 'ProjectList',
  mixins: [GlobalMixin],
  // eslint-disable-next-line vue/no-unused-components
  components: { StandardTable },
  data () {
    return {
      searchForm: this.$form.createForm(this),
      dataSource: [],
      sortedInfo: null,
      changeIndex: 0,
      serchParams: { pageNum: 1, pageSize: 10 } // 搜索条件
    }
  },
  computed: {
    ...mapState({
      approvalStateDict: state => state.dict.approvalState
    }),
    columns () {
      let { sortedInfo } = this
      sortedInfo = sortedInfo || { order: 'descend', columnKey: 'pdepartment' } // descend  //ascend
      return columnsData(this.$createElement, sortedInfo, this)
    }
  },
  beforeMount () {
    // 获取字典项
    this.$store.dispatch('dict/fetchDict', 'approvalState')
    this.$store.dispatch('dict/fetchDict', 'a')
    // 获取列表
    this.fetchList(this._getTableParams(this.searchForm))
  },

  methods: {
    // 获取列表
    fetchList () {
      this.serchParams = { ...this.serchParams }// this.$PROJECTID
      tableList(this.serchParams).then(res => {
        this.dataSource = res.list || []
        // 处理分页情况
        const { pageNum, pageSize } = this.serchParams
        this.PAGINATION = {
          total: res.total || 0,
          pageNum,
          pageSize
        }
      })
    },
    // 搜索
    handleSearch () {
      this.serchParams = this._getTableParams(this.searchForm, { pageNum: 1 })
      this.fetchList()
    },
    // 切换数据
    onChange (changeParams, sort) {
      const { order } = sort
      sort.order = order === 'ascend' ? 'descend' : order === undefined ? 'ascend' : 'descend'
      this.sortedInfo = sort
      this.serchParams = { ...this.serchParams, ...changeParams }
      this.fetchList()
    },
    // 弹窗一
    boxShow1 (record) {
      this.$dialog(fromTem,
        // modal props
        { title: '弹窗一', move: true },
        // component props
        {
          ok: (q) => { }
        }
      )
    },
    // 弹窗二
    boxShow2 (record) {
      this.$dialog(Test,
        // modal props
        { title: '弹窗二' },
        // component props
        { id: record.id, msg: '确定或者取消无任何交互' }
      )
    },
    // 弹窗三
    boxShow3 (record) {
      let tem = `<div>
        <h2>自定义标题</h2>
        <p>是否确定查看自定义数据</p>
      </div>`
      this.$dialog(tem,
        // modal props
        { title: '弹窗三' }
      )
    },
    // 弹窗四
    boxShow4 (record) {
      this.$dialog(backOpinion,
        // modal props
        { title: '弹窗四' },
        // component props
        { msg: '确定按钮做简单操作，没有组件之间的交互使用!!!!!!!!!!!' },
        // clicks
        {
          onOK: () => new Promise(resolve => {
            resolve(true)
          })
        }
      )
    },
    // 弹窗5
    boxShow5 (record) {
      this.$dialog(frommybtns,
        // modal props
        { title: '弹窗一', footer: null },
        // component props
        {
          ok: (q) => { this.dialogInstance.modalClose() }
        }
      )
    },
    // 重置
    handleReset () {
      this.sortedInfo = null
      this.searchForm.resetFields()
      this.serchParams = this._getTableParams(this.searchForm)
      this.fetchList()
    }
  }
}
</script>
<style lang="less" scoped>
@import "./index.less";
</style>
